<template>
  <div class="AccountInfo">
    <div
        class="window_prompt_box"
        :style="{'background-color':promptBoxColor}"
        v-if="promptBoxShow">{{promptBoxInfo}}</div>
    <div class="modifyPassword" v-if="ModifyInfoWindow">
      <div class="ModifyInfoWindow">
        <div class="ModifyInfoWindowTitle">
          <a class="ChangeWindowClose" title="关闭" @click="close">×</a>

          <div class="ModifyInfoMethod" v-if="modify_phone">
            <div :class="{ step_active:byEmail }" @click="ChangeToEmail">
              <text>通过邮箱</text>
            </div>
            <div :class="{ step_active:byPassword }" @click="ChangeToPassword">
              <text>通过密码</text>
            </div>
          </div>

          <div class="ModifyInfoMethod" v-if="modify_email">
            <div :class="{ step_active:byPassword }">
              <text>通过密码</text>
            </div>
            <div  :class="{ step_active:byPhone }">
              <text>通过手机</text>
            </div>
          </div>

          <div class="ModifyInfoMethod" v-if="modify_password">
            <div :class="{ step_active:byEmail }">
              <text>通过邮箱</text>
            </div>
            <div  :class="{ step_active:byPhone }">
              <text>通过手机</text>
            </div>
          </div>
        </div>

        <div class="ModifyInfoBody">
          <ul class="BodyUL" v-if="modify_phone&&byEmail">
            <li>
              <input
                  type="text"
                  v-model="vCode_modifyPhone"
                  placeholder="请输入验证码">
              <p
                  @click="sendCode">获取验证码</p>
            </li>
            <li>
              <input
                  type="text"
                  v-model="newPhone_byEmail"
                  @blur="checkPhone(newPhone_byEmail)"
                  placeholder="请设置新号码">
            </li>
            <li>
              <button
                  class="SubmitBtn"
                  type="submit"
                  @click="submit"><span>提交</span></button>
            </li>
          </ul>

          <ul class="BodyUL" v-if="modify_phone&&byPassword">
            <li>
              <input
                  type="password"
                  v-model="password_modifyPhone"
                  placeholder="请输入密码">
            </li>
            <li>
              <input
                  type="text"
                  v-model="newPhone_byPassword"
                  @blur="checkPhone(newPhone_byPassword)"
                  placeholder="请设置新号码">
            </li>
            <li>
              <button
                  class="SubmitBtn"
                  type="submit"
                  @click="submit"><span>提交</span></button>
            </li>
          </ul>

          <ul class="BodyUL" v-if="modify_email&&byPassword">
            <li>
              <input
                  type="password"
                  v-model="password_modifyEmail"
                  placeholder="请输入密码">
            </li>
            <li>
              <input
                  type="email"
                  v-model="newEmail_byPassword"
                  @blur="checkEmail(newEmail_byPassword)"
                  placeholder="请设置新邮箱">
            </li>
            <li>
              <button
                  class="SubmitBtn"
                  type="submit"
                  @click="submit"><span>提交</span></button>
            </li>
          </ul>

          <ul class="BodyUL" v-if="modify_password&&byEmail">
            <li>
              <input
                  type="text"
                  v-model="vCode_modifyPassword"
                  placeholder="请输入验证码">
              <p @click="sendCode">获取验证码</p>
            </li>
            <li>
              <input
                  type="password"
                  v-model="newPassword_byEmail"
                  @blur="checkPassword(newPassword_byEmail)"
                  placeholder="请设置新密码">
            </li>
            <li>
              <input
                  type="password"
                  v-model="ConfirmNewPassword"
                  @blur="ConfirmPassword(newPassword_byEmail,ConfirmNewPassword)"
                  placeholder="请确认新密码">
            </li>
            <li>
              <button
                  class="SubmitBtn"
                  @click="submit"
                  type="submit"><span>提交</span></button>
            </li>
          </ul>
        </div>
      </div>
    </div>


    <div class="avatar-wrapper">
      <svg width="90" height="90">
        <circle cx="45" cy="45" r="45" fill="#08a180"></circle>
      </svg>
      <text id="svg-text">{{name.toUpperCase().charAt(0)}}</text>
    </div>
    <div class="infoBox nameBox">
      <p class="tips">昵称: </p>
      <el-input class="input" v-model="name" @blur="changeName" maxlength="20"></el-input>
    </div>
    <div class="infoBox phoneBox">
      <p class="tips">电话: </p>
      <el-input class="input" v-model="phone" :disabled="true" ></el-input>
    </div>
    <div class="infoBox emailBox">
      <p class="tips">邮箱: </p>
      <el-input class="input" v-model="email" :disabled="true"></el-input>
    </div>
    <div class="infoBox passwordBox">
      <p class="tips">密码: </p>
      <el-input class="input" v-model="password" :disabled="true" type="password" ></el-input>
    </div>
    <div class="btn_box">
      <el-button class="btn" type="primary" @click="changePassword" >修改密码</el-button>
      <el-button class="btn" type="primary" @click="changeEmail" >修改邮箱</el-button>
      <el-button class="btn" type="primary" @click="changePhone" >修改电话</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: "PersonalInformation",
  data() {
    return{
      name:"",
      phone:"",
      email:"",
      password:"",
      promptBoxInfo:"",
      promptBoxColor:'',
      promptBoxShow:false,
      ModifyInfoWindow:false,
      modify_password:false,
      modify_email:false,
      modify_phone:false,
      byPassword:false,
      byEmail:false,
      byPhone:false,
      vCode_modifyPhone:"",
      vCode_modifyPassword:"",
      password_modifyPhone:"",
      password_modifyEmail:"",
      newPhone_byEmail:"",
      newPhone_byPassword:"",
      newEmail_byPassword:"",
      newPassword_byEmail:"",
      ConfirmNewPassword:"",
      user:{}
    }
  },
  methods: {
    changeName() {
      this.checkName()
          .then(res=>{
            if(res){
              var params = {
                id: this.user.id,
                username: this.name,
                password: '',
                email: this.user.email,
                phone: this.user.phone
              }
              this.$axios
                  .put(`${this.$target}/user/update`, JSON.stringify(params), {
                    headers: {
                      'Content-Type': 'application/json;charset=UTF-8'
                    }
                  })
                  .then(res => {
                    if (res.data.status == 0) {
                      this.user.username=this.name
                      localStorage.setItem("user",JSON.stringify(this.user))
                      this.showSuccess("修改成功!")
                    } else {
                      this.showError("修改失败!")
                    }
                  })
            }
          })
    },
    changeEmail(){
      this.modify_email=true
      this.byPassword=true
      this.modify_phone=false
      this.modify_password=false
      this.byEmail=false
      this.byPhone=false
      this.show()
    },
    changePhone(){
      this.modify_phone=true
      this.byEmail=true
      this.modify_email=false
      this.modify_password=false
      this.byPassword=false
      this.byPhone=false
      this.show()
    },
    changePassword(){
      this.modify_password=true
      this.byEmail=true
      this.modify_email=false
      this.modify_phone=false
      this.byPassword=false
      this.byPhone=false
      this.show()
    },
    ChangeToPassword(){
      this.byEmail=false
      this.byPassword=true
    },
    ChangeToEmail(){
      this.byPassword=false
      this.byEmail=true
    },
    async checkPhone(input){
      if(input.length!=11){
        this.showError("手机号格式错误!")
        return false
      }else if(input==this.phone){
        this.showError("新旧手机号不能相同!")
        return false
      }
      let res=await this.$axios
          .get(`${this.$target}/user/find/phone/`+input)
      if(res.data.status==0){
        return true//可以使用，不存在
      }else{
        this.showError("该手机号已被注册!")
        return false
      }
    },
    async checkEmail(input){
      if(!this.IsEmail(input)){
        this.showError("邮箱格式错误!")
        return false
      }else if(input==this.email){
          this.showError("新旧邮箱不能相同!")
          return false
      }
      let res=await this.$axios
          .get(`${this.$target}/user/find/email/`+input)
      if(res.data.status==0){
        return true//可以使用，不存在
      }else{
        this.showError("该邮箱已被注册!")
        return false
      }
    },
    checkPassword(input){
      if(input.length>=6&&input.length<=18){
        return true
      }else{
        this.showError("密码长度6-18位!")
        return false
      }
    },
    ConfirmPassword(fir,sec){
      if(fir==sec){
        return true
      }else{
        this.showError("两次密码输入不一致!")
        return false
      }
    },
    async checkName(){
      if(this.name.length<5||this.name.length>16){
        this.showError("用户名长度为5-16!")
        this.name=this.user.username
        return false
      }else if(this.name==this.user.username){
        this.showError("新旧用户名不能相同!")
        this.name=this.user.username
        return false
      }else {
        let res=await this.$axios.get(`${this.$target}/user/find/name/` + this.name)
        if(res.data.status==0){
          return true
        }else{
          this.showError("该用户名已存在!")
          return false
        }
      }
    },
    sendCode(){
      this.$axios
          .get(`${this.$target}/email/send/`+this.user.email)
          .then(res=>{
            if(res.data.status==0){
              this.showSuccess("验证码已发送!")
            }else{
              this.showError("验证码发送失败!")
            }
          })
    },
    submit(){
      if(this.modify_phone&&this.byEmail){
        if(this.checkPhone(this.newPhone_byEmail)){
          this.$axios
              .get(`${this.$target}/email/verify/`+this.vCode_modifyPhone)
              .then(res => {
                if (res.data.status==0) {
                  var params = {
                    id: this.user.id,
                    username: this.user.username,
                    password: '',
                    email: this.user.email,
                    phone: this.newPhone_byEmail
                  }
                  this.$axios
                      .put(`${this.$target}/user/update`, JSON.stringify(params), {
                        headers: {
                          'Content-Type': 'application/json;charset=UTF-8'
                        }
                      })
                      .then(res => {
                        if (res.data.status == 0) {
                          this.phone=this.newPhone_byEmail
                          this.user.phone=this.newPhone_byEmail
                          localStorage.setItem("user",JSON.stringify(this.user))
                          this.showSuccess("修改成功!")
                          this.close()
                        } else {
                          this.showError("修改失败!")
                        }
                      })
                } else {
                  this.showError("验证码不正确!")
                }
              })
        }
      }else if(this.modify_phone&&this.byPassword){
        if(this.checkPhone(this.newPhone_byPassword)){
          this.$axios
              .get(`${this.$target}/user/verify?id=`+this.user.id+`&password=`+this.password_modifyPhone)
              .then(res=>{
                if(res.data.status==0){
                  var params = {
                    id: this.user.id,
                    username: this.user.username,
                    password: '',
                    email: this.user.email,
                    phone: this.newPhone_byPassword
                  }
                  this.$axios
                      .put(`${this.$target}/user/update`, JSON.stringify(params), {
                        headers: {
                          'Content-Type': 'application/json;charset=UTF-8'
                        }
                      })
                      .then(res => {
                        if (res.data.status == 0) {
                          this.phone=this.newPhone_byPassword
                          this.user.phone=this.newPhone_byPassword
                          localStorage.setItem("user",JSON.stringify(this.user))
                          this.showSuccess("修改成功!")
                          this.close()
                        } else {
                          this.showError("修改失败!")
                        }
                      })
                }else{
                  this.showError("密码错误!")
                }
              })
        }
      }else if(this.modify_email&&this.byPassword){
        if(this.checkEmail(this.newEmail_byPassword)){
          console.log(this.password_modifyEmail)
          this.$axios
              .get(`${this.$target}/user/verify?id=`+this.user.id+`&password=`+this.password_modifyEmail)
              .then(res=>{
                if(res.data.status==0){
                  var params = {
                    id: this.user.id,
                    username: this.user.username,
                    password: '',
                    email: this.newEmail_byPassword,
                    phone: this.user.phone
                  }
                  this.$axios
                      .put(`${this.$target}/user/update`, JSON.stringify(params), {
                        headers: {
                          'Content-Type': 'application/json;charset=UTF-8'
                        }
                      })
                      .then(res => {
                        if (res.data.status == 0) {
                          this.email=this.newEmail_byPassword
                          this.user.email=this.newEmail_byPassword
                          localStorage.setItem("user",JSON.stringify(this.user))
                          this.showSuccess("修改成功!")
                          this.close()
                        } else {
                          this.showError("修改失败!")
                        }
                      })
                }else{
                  this.showError("密码错误!")
                }
              })
        }
      }else if(this.modify_password&&this.byEmail){
        if(this.checkPassword(this.newPassword_byEmail)){
          if(this.ConfirmPassword(this.newPassword_byEmail,this.ConfirmNewPassword)){
            this.$axios
                .get(`${this.$target}/email/verify/`+this.vCode_modifyPassword)
                .then(res => {
                  if (res.data.status==0) {
                    var params = {
                      id: this.user.id,
                      username: this.user.username,
                      password: this.newPassword_byEmail,
                      email: this.user.email,
                      phone: this.user.phone
                    }
                    this.$axios
                        .put(`${this.$target}/user/update`, JSON.stringify(params), {
                          headers: {
                            'Content-Type': 'application/json;charset=UTF-8'
                          }
                        })
                        .then(res => {
                          if (res.data.status == 0) {
                            this.password=this.newPassword_byEmail
                            this.user.password=this.newPassword_byEmail
                            localStorage.setItem("user",JSON.stringify(this.user))
                            this.showSuccess("修改成功!")
                            this.close()
                          } else {
                            this.showError("修改失败!")
                          }
                        })
                  } else {
                    this.showError("验证码不正确!")
                  }
                })
          }
        }
      }
    },
    show(){
      this.newPhone_byPassword=""
      this.newPhone_byEmail=""
      this.newEmail_byPassword=""
      this.newPassword_byEmail=""
      this.vCode_modifyPhone=""
      this.vCode_modifyPassword=""
      this.password_modifyPhone=""
      this.password_modifyEmail=""
      this.ConfirmNewPassword=""
      this.ModifyInfoWindow=true
      this.$emit("onShowShelter")
    },
    close(){
      this.ModifyInfoWindow=false
      this.$emit("onCloseShelter")
    },
    showSuccess(text){
      this.promptBoxInfo=text
      this.promptBoxColor='#45cb45'
      this.promptBoxShow=true
      setTimeout(()=>{//用箭头函数保证this指向vue实例
        this.promptBoxShow=false
      }, 1000)
    },
    showError(text){
      this.promptBoxInfo=text
      this.promptBoxColor='#e12a2a'
      this.promptBoxShow=true
      setTimeout(()=>{
        this.promptBoxShow=false
      }, 1000)
    },
    IsEmail(str) {
      var reg = /^([a-zA-Z]|\d)(\w|-)+@[a-zA-Z\d]+\.([a-zA-Z]{2,4})$/
      return reg.test(str);
    }
  },
  mounted() {
    this.user=JSON.parse(localStorage.getItem("user"))
    this.name=this.user.username
    this.password='12345678'
    this.email=this.user.email
    this.phone=this.user.phone
    console.log(this.user)
  }
}
</script>

<style src="@/assets/css/personal_info.css" scoped>
</style>